<template>
  <div id="userInfo">
    <section class="userTop">
      <div class="left">
        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
      </div>
      <div class="right">
        <p class="loginType">{{data.loginType}}</p>
        <p class="userName">{{!isEmpty(user.userName) ? user.userName : user.phone}}</p>
        <p class="endTime">体验套餐到期时间：{{data.endTime}}</p>
      </div>
    </section>
    <contentsArea v-if="!isEmpty(data.active)" :active="data.active"></contentsArea>
  </div>
</template>

<script lang="ts" setup>
import contentsArea from './components/content.vue'
import {ref,reactive } from 'vue'
import 'element-plus/es/components/button/style/css'
import {isEmpty} from "../../../../utils/utils";
import wx from "weixin-js-sdk";
import {searchUserAct} from "../../../../api/api";

/**
 * 查询是否有优惠券
 * 返回boolean类型
 */
const searchAct = async(): Promise<boolean> => {
  const data:object = {

  }
  try{
    const result = await searchUserAct(data)
    if(result.data.status === 0){
      if(!isEmpty(result.data.data)){
        // result.data.data长度大于0返回true
        return result.data.data.length > 0
      }else{
        // 没有result.data.data返回false
        return false
      }
    }else{
      // 调用失败返回false
      return false
    }
  }
  catch (e) {
    ElMessage({
      message: '查询优惠券失败，请联系管理员',
      type: 'error',
    })
    console.error(e)
    return false
  }
}


/**
 * 获取微信签名
 */
const  getSignature = async() => {
  // let url = location.href.split("#")[0];
  let url = window.location.origin;
  // let url = 'http://process.xlmediawatch.com';
  try {
    // await this.wechatStart()
    await getAjax('get', `http://59.110.22.117/wechat/sign?url=${url}`, '', '新联年底大促')

  } catch (e) {
    console.log(e);
  }
}

/**
 * 封装ajax
 * @param _methods 调用请求  post  get 。。。
 * @param url  请求地址
 * @param _data  请求参数
 * @param desc  描述
 */
const getAjax = (_methods:string, url:string, _data:any,desc:any) => {
  return new Promise((resolve, reject) => {
    let xhr: XMLHttpRequest;
    if (XMLHttpRequest) {
      xhr = new XMLHttpRequest()
    } else {
      xhr = new ActiveXObject()
    }
    let data = _data || null;
    let methods = _methods || 'get';
    xhr.open(methods, url, true)
    // 设置请求头
    // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(data)
    xhr.onreadystatechange = () => {
      if(xhr.readyState === 4){
        let result = xhr.responseText
        getWxConfig(JSON.parse(result),desc)
      }


    }
  })
}

/**
 * 微信jssdk注册
 * @param result  接口返回的签名等参数
 * @param desc  描述
 */
const getWxConfig = (result:any,desc:any) => {
  wx.config({
    debug: false, // true时，手机微信环境访问会alert一些errmsg信息，如果显示errmsg:ok表示正常，否认表示出了问题
    appId: result.appId, // 必填，公众号的唯一标识
    timestamp: result.timestamp, // 后台返回的数据中取
    nonceStr: result.nonceStr, // 后台返回的数据中取
    signature: result.signature, // 后台返回的数据中取
    jsApiList: [
      'checkJsApi',
      'onMenuShareAppMessage',
      'onMenuShareTimeline',
      'updateAppMessageShareData',
      'updateTimelineShareData',
      'closeWindow'
    ]
  })
  wx.ready(function() {
    let link:string = ''
    if(window.location.href.indexOf('?') !== -1){
      link = window.location.href.split('?')[0]
    }else{
      link = window.location.href
    }
    // 0: "onMenuShareAppMessage"
    // 1: "onMenuShareTimeline"
    // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
    wx.onMenuShareAppMessage({
      title: '新联年底大促', // 分享标题
      desc: String(desc), // 分享描述
      link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: 'http://wxpro.xlmediawatch.com/img/inews促销活动/hot_share_logo.png', // 分享图标
      success: function() {
        // 设置成功
        // alert("分享给朋友成功");
      },
      fail: function () {
        // alert("分享失败1111");
      }
    })
    // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
    wx.onMenuShareTimeline({
      title: '新联年底大促', // 分享标题
      desc: String(desc), // 分享描述
      link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: 'http://wxpro.xlmediawatch.com/img/inews促销活动/hot_share_logo.png', // 分享图标
      success: function() {
        // 设置成功
        // alert("分享到朋友圈成功");
      },
      fail: function () {
        // alert("分享失败2222");
      }
    })
    // wx.closeWindow();
  })
}


/**
 * 调用获取微信签名
 */
getSignature()



const data = reactive({
  endTime: ref<string>('2022-12-31'),
  loginType:ref<string>('已登录'),
  active:ref<string>('') // new--新用户   old--老用户  over--活动过期
})

const getActive = async() => {
  const date = `${data.endTime} 23:59:59`.replace(/-/g, "/")
  console.log('date',date)
  if(new Date(date).valueOf() < new Date().valueOf()){
    // 活动结束
    data.active = 'over'
  }else{
    data.active = await searchAct() ? 'new' : 'old'
  }
}
getActive()


const user = ref<any>({})
if(!isEmpty(sessionStorage.getItem('userInfo'))){
  user.value = sessionStorage.getItem('userInfo')
  user.value = JSON.parse(user.value)
  console.log('user',user)
}
console.log('user',user)

</script>


<style lang="scss">
#userInfo{
  box-sizing: border-box;
  padding: 10px 20px;
  background: #e9e9e9;
  min-height: 100vh;
  .userTop{
    display: flex;
    padding: 14px 10px;
    height: 70px;
    border: 1px solid #c3c3c3;
    background: #f5f5f5;
    border-radius: 14px;
    .left{
      width: 70px;
      padding: 8px;
      box-sizing: border-box;
      >img{
        height: 100%;
      }
    }
    .right{
      flex-grow: 1;
      >p{
        padding: 0;
        margin: 0;
        line-height: 20px;
      }
      .loginType{
        text-align: right;
        color: #999999;
        font-size: 12px;
        -webkit-transform: scale(0.9);
      }
      .userName{
        color: #cc1b10;
        font-size: 12px;
        font-weight: 700;
      }
      .endTime{
        color: #999999;
        font-size: 12px;
      }
    }

  }

}
</style>
